<template>
  <div>
    <div class="header">
      <img src="箭头.png" @click="fx()" />
      <h3>个性化服务流程介绍</h3>
    </div>
    <div class="banner">
      <img src="个性化banner.png" alt />
    </div>
    <!-- 内容部分 -->
    <div class="contt">
      <h2>您能得到</h2>
    </div>
    <div class="content">
      <div class="loop">
        <img src="设计2.png" alt />
        <span>
          全案设计
          <p>设计一体化女友</p>
        </span>
      </div>
      <div class="loop">
        <img src="浴缸.png" alt />
        <span>
          全案设计
          <p>设计一体化女友</p>
        </span>
      </div>
      <div class="loop">
        <img src="施工人员.png" alt />
        <span>
          全案设计
          <p>设计一体化女友</p>
        </span>
      </div>
      <div class="loop">
        <img src="盖章文件.png" alt />
        <span>
          全案设计
          <p>设计一体化女友</p>
        </span>
      </div>
    </div>
    <!-- 服务流程 -->
    <div class="service">服务流程预览</div>
    <div class="process">
      <h2>01设计沟通(时长不固定)</h2>
      <span>···○····○·····························○····························○·······························</span>
    </div>
    <div class="text">
      <p>线上沟通</p>
    </div>
    <div class="text1">
      <div class="text_x">
        <h2>付费量房</h2>
        <div class="kuang">
          <p>
            <span>为什么要量房</span>
            <br />
            <span>量房时设计师会与您深度沟通，实地量取房屋，会让设计方案更加合理，您的女朋友才会更喜欢</span>
          </p>
        </div>
      </div>
      <div class="text_x">
        <h2>沟通预案</h2>
        <div class="kuang">
          <p>
            <span>预案是什么</span>
            <br />
            <span>量房时设计师会与您深度沟通，实地量取房屋，会让设计方案更加合理，您的女朋友才会更喜欢</span>
          </p>
        </div>
      </div>
      <div class="text_x">
        <h2>设计签约</h2>
        <div class="kuang">
          <p>
            <span>设计师会交付什么</span>
            <br />
            <span>量房时设计师会与您深度沟通，实地量取房屋，会让设计方案更加合理，您的女朋友才会更喜欢</span>
          </p>
        </div>
      </div>
    </div>

    <div class="text_top">
      <h2>02施工签约(3-7天)</h2>
      <span>···○·····························○···</span>
    </div>
    <div class="text2">
      <div class="text_x">
        <h2>预交底</h2>
        <div class="kuang">
          <p>
            <span>设计师会交付什么</span>
            <br />
            <span>量房时设计师会与您深度沟通，实地量取房屋，会让设计方案更加合理，您的女朋友才会更喜欢</span>
          </p>
        </div>
        <h2>施工签约</h2>
      </div>
    </div>
    <div class="text_top">
      <h2>03施工阶段(50-70天)</h2>
      <span>···○·····························○·····························○··························</span>
    </div>
    <div class="text3">
      <div class="text_x">
        <h2>开工准备</h2>
        <div class="kuang">
          <p>
            <span>开工需要准备什么</span>
            <br />
            <span>量房时设计师会与您深度沟通，实地量取房屋，会让设计方案更加合理，您的女朋友才会更喜欢</span>
          </p>
        </div>
      </div>
      <div class="text_x">
        <h2>主材陪购</h2>
        <div class="kuang">
          <p>
            <span>如何陪购</span>
            <br />
            <span>量房时设计师会与您深度沟通，实地量取房屋，会让设计方案更加合理，您的女朋友才会更喜欢</span>
          </p>
        </div>
      </div>
      <div class="text_x">
        <h2>节点验收</h2>
        <div class="kuang">
          <p>
            <span>包含哪些验收</span>
            <br />
            <span>量房时设计师会与您深度沟通，实地量取房屋，会让设计方案更加合理，您的女朋友才会更喜欢</span>
          </p>
        </div>
      </div>
    </div>
    <div class="text_top">
      <h2>04主材阶段(不固定)</h2>
      <span>···○·····○··</span>
    </div>
    <div class="text4">
      <h2>节点验收</h2>
      <h2>节点验收</h2>
    </div>
    <!-- 底部 -->
    <div class="bottoms">
      <div class="build">
        <span>施工由被窝精工提供服务</span>
        <span>></span>
        <p>被窝家装标准化施工服务</p>
      </div>
      <div class="loops">
        <img src="工程.png" alt />
        <span>
          施工标准化
          <p>标准化工程执行丨标准化验收女友</p>
        </span>
      </div>
      <div class="loops">
        <img src="vr.png" alt />
        <span>
          施工标准化
          <p>标准化工程执行丨标准化验收女友</p>
        </span>
      </div>
      <div class="loops">
        <img src="监控.png" alt />
        <span>
          施工标准化
          <p>标准化工程执行丨标准化验收女友</p>
        </span>
      </div>
      <div class="bott">
        <div class="cation">
          <span>
            <img src="心.png" alt /> 十年品质保证
          </span>
          <span>
            <img src="盾牌.png" alt />施工延期赔偿
          </span>
          <span>
            <img src="钻石.png" alt />施工0增项
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fx() {
      this.$router.go("-1");
    },
  },
};
</script>

<style scoped>
.header {
  background: white;
  height: 40px;
  line-height: 30px;
  width: 100%;
  position: fixed;
  top: 0px;
  padding-right: 40px;
  padding-left: 20px;
}
.header h3 {
  text-align: center;
  font-weight: bold;
}
.header img {
  width: 20px;
  height: 20px;
  float: left;
  margin-top: 5px;
}

.banner img {
  width: 100%;
}
.contt {
  width: 90%;
  margin: 0 auto;
}
.contt h2 {
  font-size: 16px;
  font-weight: bold;
}
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.loop {
  width: 150px;
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
}
.loop img {
  width: 40px;
  height: 40px;
}
.loop span {
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
}
.loop p {
  font-size: 12px;
  color: #9a9997;
}
.service {
  width: 90%;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
}
.process {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
}
.process h2 {
  font-size: 14px;
  font-weight: bold;
  background: #ffe177;
  width: 170px;
  text-align: center;
  padding: 5px;
  border-radius: 20px;
}
.process span {
  writing-mode: vertical-lr;
  float: left;
  margin-left: 20px;
}
.text {
  font-size: 14px;
  margin-top: 20px;
}

.kuang {
  width: 280px;
  height: 110px;
  border: 1px solid #9e9e9e;
  float: left;
  border-radius: 5px;
  margin-top: 20px;
  background: rgba(255, 225, 119, 0.3);
  margin-bottom: 20px;
  margin-left: 10px;
}
.kuang p {
  display: block;
  width: 280px;
  height: 110px;
  border: black 1px solid;
  border-radius: 5px;
  margin-top: -8px;
  margin-left: -8px;
  background: white;
  padding: 10px;
}
.kuang span:nth-of-type(1) {
  font-weight: bold;
}
.kuang span:nth-of-type(2) {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.text_x h2 {
  font-size: 14px;
  margin-top: 20px;
  width: 150px;
  display: block;
}
.text1 {
  width: 100%;
  height: 500px;
}
.text3 {
  width: 100%;
  height: 490px;
  /* background: black; */
}
.text_top {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  /* height: 50px; */
}
.text_top h2 {
  font-size: 14px;
  font-weight: bold;
  background: #ffe177;
  width: 160px;
  text-align: center;
  padding: 5px;
  border-radius: 20px;
}
.text_top span {
  writing-mode: vertical-lr;
  float: left;
  margin-left: 20px;
}
.text4 {
  height: 80px;
}
.text4 h2 {
  font-size: 14px;
  margin-top: 20px;
}
.bottoms {
  background: #f8f8f8;
}
.build {
  width: 90%;
  margin: 0 auto;
}
.build span {
  font-size: 20px;
  font-weight: bold;
}
.build span:nth-of-type(2) {
  font-size: 22px;
  color: #9a9997;
  float: right;
}
.build p {
  font-size: 12px;
  color: #9a9997;
}
.loops {
  width: 90%;
  margin: 0 auto;
  display: flex;
  margin-top: 35px;
}
.loops img {
  width: 40px;
  height: 40px;
}
.loops span {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
}
.loops p {
  font-size: 12px;
  color: #9a9997;
}
.bott {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  margin-top: 30px;
  background: #ffe177;
}
.bott .cation span {
  margin-right: 10px;
  font-size: 14px;
}
.cation {
  width: 90%;
  margin: 0 auto;

  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}
.cation span {
  display: flex;
  font-size: 14px;
  margin-right: 20px;
  font-weight: normal;
  margin-top: 15px;
}
.cation img {
  width: 15px;
  height: 18px;
  padding-top: 3px;
  margin-right: 3px;
}
</style>